<template>
	<view style="width: 100%;min-height: 100vh;overflow: hidden;"
		:style="{background:'url('+Imgbase+'/'+skin+'_goodpoor_bgc.png)','background-size':'100%',}">

		<scroll-view scroll-y class="w100" style="height: 100vh;" @scrolltolower="onbottom()">

			<view class="padding-top-50 padding-left-40 flex-between h-150">
				<view class="">
					<image class="w-80 h-80" :src="Imgbase+'/'+skin+'_goodpoor_img1.png'" mode="aspectFit"
						@click="back">
					</image>
				</view>

				<view class="">
					<image class="w-200 h-100" :src="Imgbase + '/new_goodinf_img1.png'" mode="aspectFit">
					</image>
				</view>
			</view>


			<view class="padding-left-25 padding-right-25 padding-top-30" style="overflow: hidden;">
				
				<view class="items_box h-325 radius-15 padding-left-12 padding-right-12" v-for="(item,index) in list"
					:key="index" @click="showGood(item.id)"
					:style="{background:'url('+Imgbase+'/brave_goodindex_img5.png)','background-size':'100% 100%',}">

					<view class="padding-top-10" style="position: relative;">
						<image class="radius-15 h-220 w-310" :src="item.adimage" mode="aspectFill">
						</image>
						<view class="bravefont font-18 text-ff" style="" v-if="item.keywords == '双F'">
							此奖池本周日晚10:30下架
							<view class="">
								介意勿拍
							</view>
						</view>
					</view>
					<view class="flex alc">
						<view class="bravefont font-24 one-line nameqing fff padding-left-10" style="width: 52%;">
							{{item.name}}
						</view>
						<view class="price Bfont font-24">
							￥{{item.cost}}
						</view>
					</view>
					<view class="jindu margin-top-15 text-center bravefont font-16">
						<view class="" style="position: relative;z-index: 10;">
							{{item.count}}/{{item.number}}
						</view>
						<view v-if="item.number == 66 && item.count<11" class="jin_s"
							:style="[{width:item.count/item.number*100 + '%'}]" style="background-color: #D43A3A;">
						</view>
						<view v-else class="jin_s" :style="[{width:item.count/item.number*100 + '%'}]"
							style="background-color: #2B9C35;">

						</view>
					</view>
				</view>


				<!-- 经典皮肤 -->
				<view v-if="skin == 'classics'" class="items_box h-325 radius-15 padding-left-12 padding-right-12"
					v-for="(item,idx) in list" :key="item.id" @click="showGood(item.id)"
					:class="skin == 'classics'?'skinco':'skinwinter'">

					<view class="" style="margin-top: -15rpx;position: relative;">
						<image class="radius-15 h-250 w-327" :src="item.adimage" mode="aspectFill">
						</image>
						<view class="Afont font-18 text-ff" style="" v-if="item.keywords == '双F'">
							此奖池本周日晚10:30下架
							<view class="">
								介意勿拍
							</view>
						</view>
					</view>
					<view class="flex alc">
						<view class="Afont font-14 quanju flex-center margin-top-2 margin-right-5">
							{{item.keywords}}
						</view>
						<view class="Afont font-22 one-line" style="width: 52%;">
							{{item.name}}
						</view>
						<view class="price Bfont font-24">
							￥{{item.cost}}
						</view>
					</view>
					<view class="jindu margin-top-15 text-center Afont font-16">
						<view class="" style="position: relative;z-index: 10;">
							{{item.count}}/{{item.number}}
						</view>
						<view v-if="item.number == 66 && item.count<11" class="jin_s"
							:style="[{width:item.count/item.number*100 + '%'}]" style="background-color: #D43A3A;">
						</view>
						<view v-else class="jin_s" :style="[{width:item.count/item.number*100 + '%'}]"
							style="background-color: #2B9C35;">

						</view>
					</view>
				</view>

				<!-- 春季皮肤 -->
				<view class="items_box h-325 radius-15 padding-left-12 padding-right-12" v-for="(item,index) in list"
					:key="index" @click="showGood(item.id)" v-if="skin == 'qing'"
					:style="{background:'url('+Imgbase+'/qing_goodindex_img5.png)','background-size':'100% 100%',}">

					<view class="" style="margin-top: -15rpx;position: relative;">
						<image class="radius-15 h-250 w-327" :src="item.adimage" mode="aspectFill">
						</image>
						<view class="Afont font-18 text-ff" style="" v-if="item.keywords == '双F'">
							此奖池本周日晚10:30下架
							<view class="">
								介意勿拍
							</view>
						</view>
					</view>
					<view class="flex alc">
						<view class="Afont font-14 quanjuqing flex-center margin-top-2 margin-right-5 fff">
							{{item.keywords}}
						</view>
						<view class="Afont font-24 one-line nameqing" style="width: 52%;">
							{{item.name}}
						</view>
						<view class="price Bfont font-24">
							￥{{item.cost}}
						</view>
					</view>
					<view class="jindu margin-top-15 text-center Afont font-16">
						<view class="" style="position: relative;z-index: 10;">
							{{item.count}}/{{item.number}}
						</view>
						<view v-if="item.number == 66 && item.count<11" class="jin_s"
							:style="[{width:item.count/item.number*100 + '%'}]" style="background-color: #D43A3A;">
						</view>
						<view v-else class="jin_s" :style="[{width:item.count/item.number*100 + '%'}]"
							style="background-color: #2B9C35;">

						</view>
					</view>
				</view>

			</view>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				skin: 'brave',
				list: [],
				page: 1,
				count: 0,
				hasData: true,
				keyword: '',
				orderpicker: ['最新发售', '价格升序', '价格降序', '剩余升序', '剩余降序'],
				orderids: [1, 2, 3, 4, 5],
				orderindex: 0,
				orderid: 1,
				loadModal: false,
			}
		},
		onLoad(e) {

		},
		onShow() {
			this.list = [];
			this.skin = uni.getStorageSync('skin')
			this.loadtypes();
		},
		methods: {
			onbottom() {
				let _this = this
				_this.page++;
				_this.loadlist();
			},
			back() {
				uni.navigateBack()
			},
			// 跳转奖池详情
			showGood(id) {
				uni.navigateTo({
					url: `/pagesA/goodspoor/nightdetail?id=${id}`
				});
			},
			// 获取标签
			loadtypes() {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Luckgoods/type',
					data: {
						type: _this.poor_type,
						token: uni.getStorageSync('token'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						_this.page = 1;
						_this.list = [];
						_this.hasData = true;
						_this.tap = res.data.data.names;
						_this.ids = res.data.data.ids;
						_this.tap.unshift('推荐')
						_this.ids.unshift(-1)
						_this.loadlist();
					}
				});
			},
			// 获取奖池列表
			loadlist(point = 0, isfresh = false) {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Luckgoods/poorlist',
					data: {
						page: _this.page,
						id: _this.ids[_this.TabCur] == -1 ? 0 : _this.ids[_this.TabCur],
						keyword: _this.keyword,
						orderid: _this.orderid,
						token: uni.getStorageSync('token'),
						is_hidden: _this.poor_type == 2 ? 1 : 0,
						is_night: 1
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '401') {
							// uni.setStorageSync('token', '');
						}
						if (res.data.code == '1') {
							if (_this.poor_type == 0 && _this.ids[_this.TabCur] == 0) {
								_this.small_list = res.data.data.small_list
							} else {
								_this.small_list = []
							}
							if (isfresh == true) {
								_this.list = [];
							}
							_this.count = res.data.data.count;
							_this.list = _this.list.concat(res.data.data.list)
							console.log(_this.list)
							if (_this.list.length >= _this.count) {
								_this.hasData = false
							}
							if (point != 0) {
								uni.createSelectorQuery().select(".app").boundingClientRect(
									data => { //目标节点
										uni.createSelectorQuery().select(".al").boundingClientRect(
											(
												res) => { //最外层盒子节点
												uni.pageScrollTo({
													duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
													scrollTop: point, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
												})
											}).exec()
									}).exec();
							}
						}
						console.log(_this.list)
						if (res.data.code == '0') {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
						_this.loadModal = false;
					}
				});
			},
		},
	}
</script>

<style lang="less" scoped>
	.skinco {
		background-color: #F0E3CE;
		box-shadow:
			5px 5px 5px #00000014,
			5px -5px 5px #00000014,
			-5px 5px 5px #00000014,
			-5px -5px 5px #00000014;
	}

	.skinwinter {
		background: url('https://oqyf-1305090490.cos.ap-shanghai.myqcloud.com/front/winter_goodindex_img5.png');
		background-size: 100% 100%;
	}


	.text-ff {
		position: absolute;
		bottom: 15rpx;
		background-color: rgba(255, 255, 255, .5);
		width: 75%;
		text-align: center;
		border-radius: 25rpx;
		left: 12.5%;
		color: #000;
		padding-bottom: 5rpx;
	}

	.items_box {
		width: 47%;
		float: left;
		margin-right: 5%;
		margin-bottom: 60rpx;

		.quanju {
			color: #ff5555;
			border-radius: 8rpx;
			border: solid 2rpx #ff5555;
			min-width: 45rpx;
			height: 24rpx;
			line-height: 20rpx;
		}

		.quanjunewyear {
			border-radius: 8rpx;
			border: solid 2rpx #FFFFFF;
			min-width: 45rpx;
			height: 24rpx;
			line-height: 20rpx;
		}

		.price {
			color: #e60000;
		}

		.pricenewyear {
			color: #e60000;
			-webkit-text-stroke: 2rpx #fff;
		}


		.jindu {
			width: 314rpx;
			height: 25rpx;
			background-color: #ffffff;
			box-shadow: inset 3rpx 4rpx 18rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 25rpx;
			border: solid 2rpx rgba(255, 255, 255, 0.9);
			position: relative;
			overflow: hidden;
			line-height: 25rpx;

			.jin_s {
				position: absolute;
				height: 100%;
				border-radius: 25rpx;
				z-index: 9;
				top: 0;
				left: 0;
				background-color: red;
			}
		}
	}

	.items_box:nth-child(2n) {
		margin-right: 0;
	}
</style>